{% extends 'base.html' %}
{% load static %}

{% block extra_css %}
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="{% static 'grading/images/favicon.ico' %}">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="{% static 'grading/vendor/bootstrap/bootstrap.min.css' %}">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="{% static 'grading/vendor/bootstrap-icons/font/bootstrap-icons.css' %}">
<!-- Custom CSS -->
<link rel="stylesheet" href="{% static 'grading/css/custom.css' %}">
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <!-- 左侧文件树 -->
        <div class="col-md-3">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">文件目录</h5>
                    <div class="mt-2">
                        <a href="{% url 'grading:batch_grade_page' %}" class="btn btn-success btn-sm me-2">
                            <i class="bi bi-tasks"></i> 批量登分
                        </a>
                        <a href="{% url 'grading:batch_ai_score_page' %}" class="btn btn-warning btn-sm">
                            <i class="bi bi-robot"></i> 批量AI评分
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <div id="directory-tree">
                        <p class="text-muted">文件树加载中...</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧内容区 -->
        <div class="col-md-9">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">文件内容</h5>
                    <div class="file-count-display text-muted small">
                        <span id="directory-file-count">0</span> 个文件
                    </div>
                </div>
                <div class="card-body">
                    <!-- 加载指示器 -->
                    <div id="loading" style="display: none;">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">加载中...</span>
                        </div>
                    </div>

                    <!-- 文件内容显示区域 -->
                    <div id="file-content" class="mt-3">
                        {% if error %}
                            <div class="alert alert-danger">
                                {{ error }}
                            </div>
                        {% else %}
                            <div class="alert alert-info">
                                请从左侧选择要评分的文件
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- 评分区域 -->
            <div class="card mt-3">
                <div class="card-header">
                    <h5 class="card-title mb-0">评分</h5>
                </div>
                <div class="card-body">
                    <!-- 文件导航按钮 -->
                    <div class="d-flex justify-content-between mb-3">
                        <button type="button" class="btn btn-outline-secondary" id="prev-file">
                            <i class="bi bi-arrow-left"></i> 上一个文件
                        </button>
                        <button type="button" class="btn btn-outline-secondary" id="next-file">
                            下一个文件 <i class="bi bi-arrow-right"></i>
                        </button>
                    </div>
                    <!-- 评分按钮组 -->
                    <div class="d-flex align-items-center">
                        <!-- 评分方式切换 -->
                        <div class="btn-group me-3" role="group" aria-label="评分方式">
                            <button type="button" class="btn btn-outline-secondary grade-mode-btn active" data-mode="letter">
                                字母等级
                            </button>
                            <button type="button" class="btn btn-outline-secondary grade-mode-btn" data-mode="text">
                                文字等级
                            </button>
                        </div>



                        <!-- 字母等级按钮组 -->
                        <div class="btn-group me-3" role="group" aria-label="字母评分选项" id="letter-grade-buttons">
                            <button type="button" class="btn btn-outline-primary grade-button" data-grade="A">A</button>
                            <button type="button" class="btn btn-outline-primary grade-button active" data-grade="B">B</button>
                            <button type="button" class="btn btn-outline-primary grade-button" data-grade="C">C</button>
                            <button type="button" class="btn btn-outline-primary grade-button" data-grade="D">D</button>
                            <button type="button" class="btn btn-outline-primary grade-button" data-grade="E">E</button>
                        </div>

                        <!-- 文字等级按钮组 -->
                        <div class="btn-group me-3" role="group" aria-label="文字评分选项" id="text-grade-buttons" style="display: none;">
                            <button type="button" class="btn btn-outline-primary grade-button" data-grade="优秀">优秀</button>
                            <button type="button" class="btn btn-outline-primary grade-button active" data-grade="良好">良好</button>
                            <button type="button" class="btn btn-outline-primary grade-button" data-grade="中等">中等</button>
                            <button type="button" class="btn btn-outline-primary grade-button" data-grade="及格">及格</button>
                            <button type="button" class="btn btn-outline-primary grade-button" data-grade="不及格">不及格</button>
                        </div>

                        <button type="button" class="btn btn-primary me-2" id="add-grade-to-file" disabled>
                            确定
                        </button>
                        <button type="button" class="btn btn-info me-2" id="ai-score-btn" disabled>
                            <i class="bi bi-robot"></i> AI评分
                        </button>
                        <button type="button" class="btn btn-outline-secondary" id="cancel-grade">
                            撤销
                        </button>
                        <button type="button" class="btn btn-outline-info ms-2" id="teacher-comment-btn" disabled>
                            <i class="bi bi-chat-text"></i> 教师评价
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 批量AI评分结果模态框 -->
<div class="modal fade" id="batchScoreResultModal" tabindex="-1" aria-labelledby="batchScoreResultModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="batchScoreResultModalLabel">批量AI评分结果</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p id="batch-score-summary" class="fw-bold"></p>
                <div id="batch-score-results-body"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- AI评分提示模态框 -->
<div class="modal fade" id="aiScoreAlertModal" tabindex="-1" aria-labelledby="aiScoreAlertModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="aiScoreAlertModalLabel">
                    <i class="bi bi-exclamation-triangle text-warning"></i> AI评分提示
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning" role="alert">
                    <h6 class="alert-heading">
                        <i class="bi bi-info-circle"></i> 提示信息
                    </h6>
                    <p id="aiScoreAlertMessage" class="mb-0"></p>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <h6 class="mb-3">
                            <i class="bi bi-file-text"></i> 文件内容预览
                        </h6>
                        <div id="fileContentPreview" class="border rounded p-3" style="max-height: 400px; overflow-y: auto; background-color: #f8f9fa; font-family: monospace; font-size: 0.9em;">
                            <div class="text-muted">正在加载文件内容...</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h6 class="mb-3">
                            <i class="bi bi-search"></i> 评分信息
                        </h6>
                        <div id="gradeInfoPreview" class="border rounded p-3" style="max-height: 400px; overflow-y: auto; background-color: #f8f9fa;">
                            <div class="text-muted">正在检查评分信息...</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="forceAiScore" style="display: none;">强制AI评分</button>
            </div>
        </div>
    </div>
</div>

<!-- 教师评价模态框 -->
<div class="modal fade" id="teacherCommentModal" tabindex="-1" aria-labelledby="teacherCommentModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="teacherCommentModalLabel">教师评价</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label for="teacherCommentText" class="form-label">评价内容：</label>
                    <textarea class="form-control" id="teacherCommentText" rows="8" placeholder="请输入或修改教师评价内容..."></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="saveTeacherComment">保存评价</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<!-- jQuery -->
<script src="{% static 'grading/vendor/jquery/jquery.min.js' %}"></script>
<!-- Bootstrap Bundle with Popper -->
<script src="{% static 'grading/vendor/bootstrap/bootstrap.bundle.min.js' %}"></script>
<!-- 自定义脚本 -->
<script src="{% static 'grading/js/grading.js' %}"></script>

<!-- 初始化数据 -->
<script>
    // 将初始数据传递给 JavaScript
    window.initialTreeData = {{ initial_tree_data|safe }};
    console.log('Initial tree data in template:', window.initialTreeData);

    // 设置 CSRF token
    $.ajaxSetup({
        beforeSend: function(xhr, settings) {
            if (!this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
            }
        }
    });
</script>
{% endblock %}
